<template>
	<view>
		<u-sticky bgColor="#6492FF" offsetTop=0 customNavHeight=0>
			<navbox :title="title"></navbox>
		</u-sticky>
		<view class="bg">

		</view>
		<view class="con">
			<view class="box">
				<view class="u-flex u-flex-y-center">
					<image :src="proinfo.logo" class="box__icon" mode=""></image>
					<view class="u-flex-column u-flex-between box__right">
						<view class="box__title">
							{{proinfo.name}}
						</view>
						<view class="u-flex-y-center">
							<view class="box__tag" v-for="(item,index) in fs" :key="index">
								{{item}}
							</view>
						</view>
					</view>
				</view>

				<view class="box__line">

				</view>
				<!-- <view class="box__fx">
					<view class="box__fx__text">
						分享
					</view>
					<image src="/static/img/home/fx.png" class="box__fx__icon" mode=""></image>
				</view> -->
				<view class="box__data">
					<view class="box__data__item" @click="navto('/pages/my/income?name='+proinfo.name)">
						<view class="box__data__item__num">
							{{proinfo.productTotalIncome}}
						</view>
						<view class="box__data__item__text">
							累计收入
						</view>
					</view>
					<view class="box__data__line">

					</view>
					<view class="box__data__item" @click="navto('/pages/my/file?productId='+proinfo.id)">
						<view class="box__data__item__num">
							{{proinfo.applyCount}}
						</view>
						<view class="box__data__item__text">
							我的推广码
						</view>
					</view>
				</view>
			</view>
			<view class="box u-flex u-flex-y-center u-flex-between" v-if="proinfo.noticeInfo" @click="show=true">
				<view class="u-flex u-flex-y-center">
					<view class="box__tagbox">
						公告
					</view>
					变更公告
				</view>
				<u-icon name="arrow-right" size="26rpx"></u-icon>
			</view>
			<view class="box">
				<view class="u-flex u-flex-y-center">
					<image src="/static/img/home/yj.png" class="box__yj" mode=""></image>
					<view class="box__title">
						项目佣金

					</view>
				</view>
				<view class="box__table">
					<view class="box__table__head">
						<view class="box__table__head__item">
							结算标准
						</view>
						<view class="box__table__head__item">
							结算价格
						</view>
						<view class="box__table__head__item">
							结算周期
						</view>
					</view>
					<view class="box__table__list" v-for="(item1,index1) in proinfo.taskList" :key="index1">
						<view class="box__table__list__item">
							{{item1.name}}
						</view>
						<view class="box__table__list__item">
							{{item1.iPrice}}元
						</view>
						<view class="box__table__list__item" v-if="!item1.settleMethod">
							T+{{item1.settleTime}}
						</view>
						<view class="box__table__list__item" v-else>
							{{item1.settleMethod}}
						</view>
						<!-- 
						
						<view class="box__table__list__item">
							T+{{item1.settleTime}}
						</view> -->
					</view>

				</view>
				<view class="box__sm" v-for="(item2,index2) in notes" :key="index2">
					{{item2}}
				</view>

			</view>
			<view class="box">
				<view class="u-flex u-flex-y-center">
					<view class="w50">
						<image src="/static/img/home/fjyq.png" class="box__fjyq" mode=""></image>
					</view>
					<view class="box__title">
						项目要求
					</view>
				</view>
				<view class="box__con">
					<u-parse :content="proinfo.required" selectable></u-parse>
				</view>
			</view>
			<view class="box" v-if="proinfo.extend1">
				<view class="u-flex u-flex-y-center">
					<view class="w50">
						<image src="/static/img/home/spjc.png" class="box__spjc" mode=""></image>
					</view>

					<view class="box__title">
						视频教程
					</view>
				</view>
				<view class="box__con">
					<video class="video" :src="proinfo.extend1"></video>
				</view>
			</view>
			<view class="box">
				<view class="u-flex u-flex-y-center">
					<view class="w50">
						<image src="/static/img/home/ic_project_guide.png" class="box__spjc" mode=""></image>
					</view>

					<view class="box__title">
						推广教程
					</view>
				</view>
				<view class="box__con">
					<u-parse :content="proinfo.workLesson" selectable></u-parse>
				</view>
			</view>
			<view class="box" v-if="proinfo.codeLesson">
				<view class="u-flex u-flex-y-center">
					<view class="w50">
						<image src="/static/img/home/qr.png" class="box__qr" mode=""></image>
					</view>

					<view class="box__title">
						申请推广码
					</view>
				</view>
				<view class="box__con">
					<!-- codeLesson -->
					<u-parse :content="proinfo.codeLesson" object-fit='fill' selectable></u-parse>
				</view>
			</view>
			<view class="box">
				<view class="u-flex u-flex-y-center">
					<view class="w50">
						<image src="/static/img/home/zysx.png" class="box__zysx" mode=""></image>
					</view>

					<view class="box__title">
						注意事项
					</view>
				</view>
				<view class="box__con">
					<!-- notice -->
					<u-parse :content="proinfo.notice" selectable></u-parse>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer__sq btn" @click="clicksq">
				申请推广码
			</view>
			<view class="footer__tj btn" @click="clickpz">
				提交凭证
			</view>
		</view>

		<!-- 弹框 -->
		<u-popup :show="show" mode="center" round="10rpx" bgColor='transparent'>
			<view class="popbox">
				<view class="popbox__top">
					<image src="/static/img/home/tz.png" class="popbox__top__bg" mode=""></image>
					<view class="popbox__top__text">
						<view class="popbox__top__text__line">

						</view>
						<view class="" style="margin: 0 14rpx;">
							公告
						</view>
						<view class="popbox__top__text__line">

						</view>
					</view>
				</view>
				<!-- 滚动的地方 -->
				<scroll-view scroll-y="true" class="popbox__sc">
					<view class="popbox__content"><u-parse :content="proinfo.noticeInfo" selectable></u-parse></view>
				</scroll-view>

				<!-- 按钮 -->
				<view class="popbox__footer">
					<view class="popbox__btn" @click="clickzx">
						我已知晓
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		product
	} from '@/api/home.js'
	export default {
		data() {
			return {
				show: false,
				title: '',
				proinfo: {},
				fs: [],
				notes: [],
				id: '',
			};
		},
		onLoad(option) {
			this.id = option.id

			// console.log(this.show)
			this.getdata()
		},
		methods: {
			getdata() {
				this.notes = []
				product(this.id).then(res => {
					uni.stopPullDownRefresh()
					if (res.data.code == 200) {
						this.proinfo = res.data.data
						this.title = this.proinfo.name
						this.fs = this.proinfo.method.split(',')
						this.proinfo.taskList.map(t => {
							if (t.note) {
								this.notes.push(t.note)
							}
						})
						if (!this.proinfo.noticeInfo) {
							this.show = false

						} else {
							this.show = true
						}
						// 详情弹框判断
						let xqpopstatusarr = uni.getStorageSync('ytbinfopopstatus')
						// 判断是否有这个详情弹框
						let i = xqpopstatusarr.find((element) => element.id === this.id)
						console.log(xqpopstatusarr)
						if (i) {
							this.show = i.show
						} else {
							xqpopstatusarr.push({
								id: this.id,
								show: this.show
							})
							uni.setStorageSync('ytbinfopopstatus', xqpopstatusarr)
						}


					}
				})
			},
			clickzx() {
				this.show = false
				let xqpopstatusarr = uni.getStorageSync('ytbinfopopstatus')
				let _this = this
				xqpopstatusarr.map(t => {
					if (t.id == _this.id) {
						t.show = _this.show
					}
				})
				uni.setStorageSync('ytbinfopopstatus', xqpopstatusarr)
			},
			clickpz() {
				if (this.proinfo.status == 1) {
					this.$u.toast('项目已结束，不支持提交凭证')
					return
				}
				if (this.proinfo.aloneConsole) {
					this.$u.toast('独立后台项目，无需提交凭证')
					return
				}
				this.navto('/pages/home/tjpz?id=' + this.proinfo.id)
			},
			clicksq() {
				if (this.proinfo.status == 1) {
					this.$u.toast('项目已结束，不支持申请推广码')
					return
				}
				this.navto('/pages/home/sqtgm?id=' + this.proinfo.id)
			}
		},
		onPullDownRefresh() {
			this.getdata()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.bg {
		width: 750rpx;
		height: 146rpx;
		background: #6492FF;
		border-radius: 0rpx 0rpx 69rpx 69rpx;
	}

	.con {
		padding: 0 16rpx 140rpx;
		margin-top: -146rpx;
	}

	.box {
		padding: 24rpx 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		position: relative;
		margin-bottom: 25rpx;

		&__tagbox {
			background-color: #0059c9;
			font-size: 24rpx;
			color: #fff;
			padding: 4rpx;
			margin-right: 20rpx;
		}

		&__icon {
			width: 104.17rpx;
			height: 104.17rpx;
			margin-right: 30rpx;
			border-radius: 20rpx;
		}

		&__right {
			height: 104.17rpx;
		}

		&__title {
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #3E3D3D;
			line-height: 46rpx;
			margin-bottom: 3px;
		}

		&__tag {
			line-height: 41rpx;
			padding: 0 10rpx;
			background-color: #6492FF;
			border-radius: 7rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 25rpx;
			color: #FFFFFF;
			margin-right: 6rpx;
			margin-bottom: 6rpx;
		}

		&__line {
			width: 544rpx;
			height: 1rpx;
			background: #D8D8D8;
			margin: 31rpx 0 0;
			margin-left: 47rpx;

		}

		&__fx {
			position: absolute;
			width: 90rpx;
			height: 46rpx;
			top: 20rpx;
			right: 0;

			&__text {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #FFFFFF;
				line-height: 46rpx;
				position: relative;
				z-index: 1;
				padding-left: 26rpx;
			}

			&__icon {
				width: 90rpx;
				height: 46rpx;
				position: absolute;
				top: 0;
				left: 0;

			}
		}

		&__data {
			display: flex;
			align-items: center;
			justify-content: center;

			&__item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 50%;
				padding-top: 28rpx;

				&__text {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #3E3D3D;
					line-height: 26rpx;
					margin-top: 22rpx;
				}

				&__num {
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 33rpx;
					color: #3E3D3D;
					line-height: 25.69rpx;

				}
			}

			&__line {
				width: 1rpx;
				height: 53rpx;
				background: #D8D8D8;
			}
		}

		&__yj {
			width: 47.22rpx;
			height: 40.28rpx;
			margin-right: 20rpx;
		}

		&__kh {
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 25rpx;
			color: #6492FF;
			line-height: 25rpx;
		}

		&__table {
			margin-top: 20rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(212, 227, 255, 0.6);
			overflow: hidden;

			&__head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: SourceHanSansSC;
				font-weight: bold;
				font-size: 30rpx;
				color: #3E3D3D;
				background-color: #B8D0FF;

				&__item {
					width: 33%;
					text-align: center;
					padding: 0;
					line-height: 30rpx;
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			&__list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 30rpx;
				color: #3E3D3D;
				background-color: #fafafa;
				border-top: 1px solid #D4E3FF;

				&__item {
					width: 33%;
					text-align: center;
					padding: 20rpx 0;
					line-height: 34rpx;
					min-height: 50rpx;
					padding: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

		}

		&__sm {
			font-family: SourceHanSansSC;
			font-weight: 400;
			font-size: 25rpx;
			color: #989898;
			line-height: 25rpx;
			margin-top: 23rpx;
			margin-bottom: 8rpx;
		}

		&__fjyq {
			width: 40.28rpx;
			height: 43.06rpx;
			// margin-right: 27rpx;
		}

		&__con {
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #3E3D3D;
			line-height: 52rpx;
			margin-top: 20rpx;
			padding-left: 60rpx;
		}

		&__spjc {
			width: 41.67rpx;
			height: 36.11rpx;
			margin-right: 27rpx;
		}

		&__qr {
			width: 41.67rpx;
			height: 41.67rpx;
			margin-right: 27.8rpx;
		}

		&__zysx {
			width: 41.67rpx;
			height: 41.67rpx;
			margin-right: 27.78rpx;
		}
	}

	.footer {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 1px;
		left: 0;
		width: 750rpx;
		height: 88rpx;
		z-index: 998;

		.btn {
			width: 375rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: solid #6492FF 1px;
			height: 88rpx;
		}

		&__sq {
			background-color: #6492FF;
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 33rpx;
			color: #FFFFFF;
		}

		&__tj {
			background-color: #f6f6f6;
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 33rpx;
			color: #6492FF;
		}
	}

	.popbox {
		width: 642rpx;
		height: 878rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		&__top {
			padding-bottom: 20rpx;
			position: relative;

			&__bg {
				width: 642rpx;
				height: 106rpx;
			}

			&__text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 642rpx;
				height: 106rpx;
				position: absolute;
				left: 0;
				top: 0;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 33rpx;
				color: #FFFFFF;
				line-height: 33rpx;

				&__line {
					width: 45rpx;
					height: 2rpx;
					background: #FFFFFF;
				}

			}
		}

		&__footer {
			display: flex;
			justify-content: center;
			padding: 20rpx 0;
		}

		&__btn {
			width: 577rpx;
			height: 69rpx;
			background: #6492FF;
			border-radius: 7rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 27rpx;
			color: #FFFFFF;
		}

		&__sc {
			height: calc(878rpx - 106rpx - 20rpx - 40rpx - 69rpx);
		}

		&__content {
			padding: 0 40rpx;
		}
	}

	.video {
		width: 100%;
	}

	.w50 {
		width: 60rpx;
	}
</style>